<template>
  <main>
    <x-header :left-options="{backText : ''}">规章列表
      <a slot="right" class="right" @click="add">
        <x-icon  class="icon" type="ios-plus-empty" fill="#0000ff" size="28"></x-icon>
        <span class="right-text">新增</span>
      </a>
      <div slot="overwrite-left" @click="goBack" class="goBack" :style="borderColor"></div>
    </x-header>
    <section class="position-box">
      <vue-better-scroll class="wrapper"
                         ref="scroll"
                         :scrollbar="scrollbarObj"
                         :pullDownRefresh="pullDownRefreshObj"
                         :pullUpLoad="pullUpLoadObj"
                         :startY="parseInt(startY)"
                         @pullingDown="onPullingDown"
                         @pullingUp="onPullingUp">

        <ul class="item" v-for="(item, index) in messageList" :key="index" @click="goDetail(item)">
          <li>
            <span class="item-title">{{item.title}} </span>
            <span class="item-time">{{item.sendTime | formatDate('MM-DD HH:mm')}}</span>
          </li>
          <!-- <li>{{item.content}}</li>
          <li>{{item.preview}}</li> -->
          <li class="item-sender">发布人:{{item.sender}}</li>
          <li class="item-content">{{item.preview}}</li>
        </ul>
      </vue-better-scroll>
    </section>

  </main>
</template>

<script>
import * as api from '../api/api'
// import * as dayjs from 'dayjs'
import VueBetterScroll from 'vue2-better-scroll'
export default {
  components: {
    VueBetterScroll
  },
  data () {
    return {
      messageList: [], // 消息列表
      page: 1, // 页码
      size: 10, // 页面大小
      borderColor: {
        borderColor: 'black'
      },
      // 这个配置可以开启滚动条，默认为 false。当设置为 true 或者是一个 Object 的时候，都会开启滚动条，默认是会 fade 的
      scrollbarObj: {
        fade: true
      },
      // 这个配置用于做下拉刷新功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启下拉刷新，可以配置顶部下拉的距离（threshold） 来决定刷新时机以及回弹停留的距离（stop）
      pullDownRefreshObj: {
        threshold: 90,
        stop: 40
      },
      // 这个配置用于做上拉加载功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启上拉加载，可以配置离底部距离阈值（threshold）来决定开始加载的时机
      pullUpLoadObj: {
        threshold: 0,
        txt: {
          more: '加载更多',
          noMore: '没有更多数据了'
        }
      },
      startY: 0, // 纵轴方向初始化位置
      scrollToX: 0,
      scrollToY: 0,
      scrollToTime: 700,
      items: []
    }
  },
  // filters: {
  //   formatDate (time, format) {
  //     const date = new Date(time)
  //     return dayjs(date).format(format)
  //   }
  // },
  created () {
    // 获取规章列表数据
    this.getData()
  },
  mounted () {

  },
  methods: {
    goBack () {
      this.$router.go(-1)
    },
    // 申请入会详情页面
    goDetail (item) {
      this.$store.state.rulesDetail = item
      this.$router.push({name: '规章详情', params: { data: item }})
    },
    // 规章新增
    add () {
      this.$router.push('/rules/add')
    },
    // 滚动到页面顶部
    scrollTo () {
      this.$refs.scroll.scrollTo(this.scrollToX, this.scrollToY, this.scrollToTime)
    },
    // 模拟数据请求
    getData (item) {
      // 获取规章列表
      const params = {
        page: this.page,
        size: this.size
      }
      api.getMessageList(params).then(res => {
        // 上拉加载
        if (item === 'up') {
          this.messageList = this.messageList.concat(res.data)
          if (res.data.length < this.size) {
            this.$refs.scroll.forceUpdate(false)
          } else {
            this.$refs.scroll.forceUpdate(true)
          }
        // 下拉刷新
        } else if (item === 'down') {
          this.messageList = res.data
          this.$refs.scroll.forceUpdate(true)
        // 初始化数据
        } else {
          this.messageList = res.data
          this.$refs.scroll.forceUpdate(true)
        }
      })
    },
    onPullingDown () {
      // 模拟下拉刷新
      console.log('下拉刷新')
      this.page = 1
      // 获取规章列表
      this.getData('down')
    },
    onPullingUp () {
      // 模拟上拉 加载更多数据
      console.log('上拉加载')
      this.page += 1
      // 获取规章列表
      this.getData('up')
    }
  }

}
</script>
<style lang="less" scoped>
.position-box {
  position: fixed;
  top: 40px;
  left: 0;
  right: 0;
  bottom: 0;
}
.right {
  position: relative;
  top: -4px
}
.right-text {
  color: #8080ff;
  position: relative;
  top: -8px;
  font-size: 1.6rem;
}
.icon {
  position: relative;
  right: -8px;
}
.item {
  padding: 5px;
  text-align: left;
  border-bottom: 1px solid #c8c7cc;
  li {
    padding: 5px;
  }
  .item-title {
    font-size: 1.9rem;
    font-weight: 600;
    width: 78%;
    display: inline-block;
  }
  .item-time {
    font-size: 1.4rem;
  }
  .item-sender {
    font-size: 1.5rem;
  }
  .item-content {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.6rem;
  }
}
</style>
